import {ref, watch} from "vue"
import {Base64 as bianma} from "js-base64"
import type {Ref} from "vue"


const shuju:Ref = ref({})

// 是否支持localStorage
let isSupport:any = null
// 判断是不是支持
const panduan = () => {
    isSupport = !!window.localStorage;
}

function useState(key:string, value:any = null) {
    const data = ref(null)
    const init = () => {
        // 如果是空的，就去本地存储中拉取数据，如果不是，就不用拉取了
        if (JSON.stringify(shuju.value) === "{}" && isSupport) {
            const jieguo =  localStorage.getItem("shuju")
            if (jieguo) {
                let aa = bianma.decode(jieguo)
                aa = JSON.parse(aa)
                if(aa){
                    shuju.value = aa
                }
            }
        }
        // 然后判断数据中是否有这个字段，如果有没，直接赋值，如果没有，赋默认值
        if (shuju.value[key]) {
            data.value = shuju.value[key]
        } else {
            data.value = value
            shuju.value[key] = value
        }
    }

    // 如果判断是空，说明没有判断，先进行判断
    if (isSupport === null) {
        panduan()
    }
    // 首先读取存放的数据
    init()

    watch(data, (oldVal,newVal) => {
        // 监听数据变化，如果改变了，就将数据中的对应属性改变，同步修改到本地存储中
        shuju.value[key] = data.value
        if (isSupport) {
            localStorage.setItem("shuju", bianma.encode(JSON.stringify(shuju.value)))
        }
    },{deep:true})
    watch(() => shuju, () => {
        if (data.value !== shuju.value[key]) {
            data.value = shuju.value[key]
        }
    },{deep:true})

    return data
}

export default useState
